<template>
	<view>
		<image src="/static/english/english_top_bg.png" class="topBg" />
		<image src="/static/english/english_bg.png" class="topBg2" />
		<view class="appName">
			英文课文朗读宝
		</view>
		<div class="container">
			<swiper class="swiper" circular @change="change" >
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="item" class="swiper-img" />
					</view>
				</swiper-item>
			</swiper>
			<div class="dot">
				<span v-for="(item, index) in swiperList.length" :key="'s'+index" :class="['dot_item', current === index ? 'active' : '']" ></span>
			</div>
			<button class="share" open-type="share">
				<span class="share_title">分享给同学</span>
				<image src="/static/english/share.png" class="share_icon" />
			</button>
		</div>
		<div class="read">
			<image src="/static/english/read_bg.png" class="read_bg" />
			<div class="read_content">
				<div class="upper flex-row">
					<div class="left flex-column">
						<div class="flex-row" style="color: #fff; font-weight: 500;font-size: 32rpx;">
							<span>课本点读</span>
							<div class="dimension">正版</div>
						</div>
						<span style="font-weight: 400;font-size: 24rpx; color: #fff; margin-top: 8rpx;">小学同步点读书</span>
					</div>
					<div class="right" @click="navTO">
						更换教材
					</div>
				</div>
				<div class="below">
					<div class="book_image">
						<image :src="data.book.cover" class="book_image"/>
					</div>
					<div class="introduce">
						<span>{{ data.book.title }}</span>
						<span style="font-weight: 400;font-size: 24rpx;margin-top: 12rpx;">{{ data.book.description }}</span>
						<div class="speak" @click="handleRead">开始点读</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bookshelf">
			<div class="tab">
				<div v-for="item in tab" :key="item.id" class="item" @click="handleTab(item.id)">
					{{item.title}}
					<image src="/static/english/line.png" class="line" :style="{visibility: activeTab === item.id ? 'unset' : 'hidden'}" />
				</div>
			</div>
			<div class="list">
				<div v-for="item in booklist" :key='item.id' class="b_item" @click="handleBook(item.id)">
					<div class="cover">
						<image :src="item.cover" class="cover_image" />
					</div>
					<div class="title">
						{{ item.title }}
					</div>
				</div>
			</div>
		</div>
		<TipCollectMp/>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onShareAppMessage, onLoad, onShow } from '@dcloudio/uni-app';
	import { getBannerApi, getYunDuoBookListApi, getMySelfApi, getCourseListApi } from '@/apis/index';
	import { hasLogin } from '@/utils/tools';
	import TipCollectMp from '@/components/tip-collect-mp/index.vue'
	const current = ref(0);
	const activeTab = ref(4);
	const tab = ref([
		{id: 4, title: '五四制'},
		{id: 5, title: '六三制'},
	])
	const data = reactive({
		book:{
			booksId: 1156871,
			cover: '/static/english/chinese_default_book.jpg',
			id: 1335041,
			title: '人教-语文-五四制-一年级上册',
			description: '一年级上册'
		}
	})
	const swiperList = ref([]);
	const booklist = ref([])
	let canGetMyself = true
	onLoad(()=>{
		getBanner()
		getBookList(activeTab.value)
		getCourseList();
	});
	onShow(()=>{
		if(hasLogin() && canGetMyself){
			getMySelfBook()
			canGetMyself = false
		}
	});
	const getCourseList = async() =>{
		const res = await getCourseListApi()
	}
	const getMySelfBook = async() =>{
		const { obj } = await getMySelfApi({course: 'chinese'})
		if (obj.length){
			data.book = obj[0]
		}
	}
	const getBanner = async() => {
		const {obj} = await getBannerApi({flag: 1})
		// const value = Object.values(res.obj)
		// const newValue = value.filter((item, index) => typeof item !== 'number' && item !== null )
		const newValue = [obj.banner1, obj.banner2].filter((item, index) => typeof item !== 'number' && item !== null)
		swiperList.value = newValue;
	}
	const getBookList = async(id) =>{
		const res = await getYunDuoBookListApi({flag: id})
		booklist.value = res.obj;
	}
	const change = (e)=>{
		current.value = e.detail.current;
	}
	const handleTab = (e)=>{
		activeTab.value = e;
		getBookList(e)
	}
	const navTO = ()=>{
		if(hasLogin()){
			canGetMyself = true
			uni.navigateTo({
				url: `/pages/select/index?data=${encodeURIComponent(JSON.stringify({course: 'chinese'}))}`
			})
		} else {
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}
	}
	onShareAppMessage(()=>{
		return {
			title: '小学初中同步课本点读工具',
			path:`/pages/tabbar/English/index`,
		}
	})
	const handleRead =() =>{
		const token = uni.getStorageSync('token');
		if(token){
			uni.navigateTo({
				url: `/pages/web-view/index?data=${encodeURIComponent(JSON.stringify({id:data.book.booksId}))}`
			})
		} else {
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}
	}
	const handleBook = (e)=>{
		if(hasLogin()){
			uni.navigateTo({
				url: `/pages/web-view/index?data=${encodeURIComponent(JSON.stringify({id:e}))}`
			})
		}else{
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}

	}
</script>

<style lang="scss">
	.topBg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 445rpx;
		z-index: -1;
	}
	.topBg2{
		height: 176rpx;
		width: 100%;
		top: 0;
		left: 0;
		position: fixed;
		z-index: 99;
	}
	.appName{
		color:#51B7FF;
		font-size: 36rpx;
		font-weight: 700;
		height: 36rpx;
		position: fixed;
		top: 116rpx;
		left: 30rpx;
		z-index: 999;
	}
	.container{
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 178rpx;
		.swiper{
			margin-top: 24rpx;
			overflow: hidden;
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.08);
			border: 2rpx solid #FFFFFF;
			border-radius: 40rpx;
			height: 346rpx;
			width: 690rpx;
			.swiper-item{
				height: 346rpx;
				width: 690rpx;
				border-radius: 40rpx;
				overflow: hidden;
				.swiper-img{
					width: 690rpx;
					height: 346rpx;
					border-radius: 40rpx;
				}
			}
		}
		.dot{
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: center;
			margin-top: 24rpx;
			.dot_item{
				width: 38rpx;
				height: 6rpx;
				background: #E2E2E2;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
			:not(:first-child){
				margin-left: 8rpx;
			}
			.active{
				background: #51B7FF;
			}
		}
		.share{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 20rpx;
			width: 238rpx;
			margin-right: unset;
			line-height: unset;
			background-color: unset !important;
			.share_title{
				font-weight: 400;
				font-size: 28rpx;
				color: #51B7FF;
			}
			.share_icon{
				width: 34rpx;
				height: 34rpx;
				margin-left: 8rpx;
			}
		}
	}
	.read{
		margin-top: 20rpx;
		height: 452rpx;
		width: 100vw;
		display: flex;
		.read_bg{
			height: 452rpx;
			width: 100vw;
			position: absolute;
			z-index: -1;
		}
		.read_content{
			padding-left: 70rpx;
			height: 452rpx;
			width: 100%;
			.upper{
				display: flex;
				flex-direction: row;
				margin-top:38rpx;
				.left{
					width: auto;
					height: auto;
				}
				.dimension{
					width: 88rpx;
					height: 44rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					background: #62DF9B;
					border-radius: 26rpx 26rpx 26rpx 0rpx;
					margin-left: 12rpx;
				}
				.right{
					width: 156rpx;
					height: 60rpx;
					border-radius: 38rpx 38rpx 38rpx 38rpx;
					border: 2rpx solid #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-left: 188rpx;
				}
			}
			.below{
				margin-top: 22rpx;
				margin-left: 28rpx;
				display: flex;
				flex-direction: row;
				.book_image{
					width: 184rpx;
					height: 240rpx;
					box-shadow: -10rpx 4rpx 8rpx 0rpx rgba(0,75,128,0.2);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					border: 2rpx solid #FFFFFF;
				}
				.introduce{
					margin-left: 28rpx;
					width: 328rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					display: flex;
					flex-direction: column;
					.speak{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 220rpx;
						height: 80rpx;
						background: #F39200;
						box-shadow: inset 0rpx 0rpx 20rpx 0rpx #FFE485, 0rpx 8rpx 20rpx 0rpx #B99000;
						border-radius: 40rpx 40rpx 40rpx 40rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						margin-top: 12rpx;
					}
				}
			}
		}
	}
	.bookshelf{
		margin-top: 42rpx;
		.tab{
			display: flex;
			flex-direction: row;
			margin-left: 30rpx;
			:not(:first-child){
				margin-left: 102rpx;
			}
			.item{
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.line{
					width: 32rpx;
					height: 8rpx;
				}
			}
		}
		.list{
			margin-top: 24rpx;
			display: flex;
			flex-wrap: wrap;
			margin-left: 12rpx;
			.b_item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-left: 18rpx;
				margin-bottom: 48rpx;
				.cover{
					width: 336rpx;
					height: 448rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 2rpx solid #FFFFFF;
					background: #F39200;
					overflow: hidden;
					.cover_image{
						width: 336rpx;
						height: 448rpx;
					}
				}
				.title{
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					width: 328rpx;
				}
			}
		}
	}
</style>